@import '../common/init.scss';

.mask-wrapper{
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(0,0,0,.3);
	overflow-y: scroll;
	display: none;
	z-index: 100;

	.auth-wrapper{
		$authWrapperHeight: 500px;
		$authWrapperWidth: 400px;
		width: $authWrapperWidth;
		height: $authWrapperHeight;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);


		.close-group{
			width: 100%;
			height: 40px;
			line-height: 40px;
			position: relative;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			background-color: white;
			.close-btn{
				position: absolute;
				right: 10px;
				top: 50%;
				transform: translateY(-50%);
				cursor: pointer;
				color: #878787;
			}
		}
		.auth-inner-wrapper{
			width: 100%;
			height: $authWrapperHeight;
			position: relative;
			overflow: hidden;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;

			.scroll-wrapper{
				width: $authWrapperWidth * 2;
				position: absolute;
				top: 0;
				left: 0;
				// background-color: #fff;

				.auth-group{
					width: $authWrapperWidth;
					height: 100%;
					padding: 20px;
					box-sizing: border-box;
					.top-group{
						width: 100%;
						height: 36px;
						border-bottom: 1px solid #eee;
						line-height: 33px;
						
						a{
							text-decoration: none;
						}
						.title{
							user-select: none;
							float: left;
							color: #212121;
							border-bottom: 3px solid #5c87d9;
						}
						.switch{
							user-select: none;
							float: right;
							color: #5c87d9;
						}
					}
					.form-group{
						margin-top: 20px;
						.input-group{
							margin-bottom: 20px;
							height: 40px;
							.short-input-group{
								width: 250px;
								float: left;
							}
							.input-group-addon{
								float: right;
								width: 100px;
								.email-captcha-btn{
									display: inline-block;
									width: 100%;
									box-sizing: border-box;
									height: 40px;
									line-height: 40px;
									text-align: center;
									cursor: pointer;
									user-select: none;
									color: #fff;
									border-radius: 5px;
									background-color: #5c87d9;
								}
								.disabled{
									color: #ccc;
									border-color: #ccc;
								}
								.image{
									width: 100%;
									height: 40px;
								}
							}
							.form-control{
								border: 1px solid #ccc;
								padding: 10px;
								box-sizing: border-box;
								width: 100%;
								height: 40px;
								&:focus{
									border: 1px solid #5c87d9;
								}
							}
							.checked{
								font-size: 14px;
							}
							.submit-btn{
								width: 100%;
								height: 40px;
								background-color: #5c87d9;
								cursor: pointer;
								border-radius: 5px;
							}
						}
					}
				}
				.signin-group{
					float: left;
					background-color: #fff;
					border-bottom-left-radius: 10px;
					border-bottom-right-radius: 10px;
				}
				.signup-group{
					background-color: #fff;
					float: left;

					.submit-btn{
						border-radius: 5px;
					}
				}
			}
		}
	}
}